<template>
  <div class="content">
    <h2>showInfo: {{ info }}</h2>
    <button @click="info.name = 'coderwhy'">子组件自行修改按钮</button><!--可以修改父组件的数据,但是不规范,不符合单向数据流-->
    <!--单向数据流: 子组件拿到父组件的数据,只能用,不能改-->
    <!--应该让子组件发出事件,然后父组件监听事件,然后在父组件里面修改,因为父组件有可能有多个子组件,子组件如果修改了数据,就会影响其他子组件,而父组件也不知道是哪个子组件修改的-->
    <!--正确的做法: 子组件发出事件-->
    <button @click="showInfoClick">子组件传递数据按钮</button>
    <hr>
    <h2>readOnly:  showInfo: {{ readInfo }}</h2>
    <!--这里会报警告-->
    <button @click="readInfo.name = 'coderwhy'">readOnly子组件自行修改按钮</button><!--不能修改父组件的数据,因为父组件的数据是只读的-->
    <!--正确做法是:传递事件出去,让父组件修改-->
    <button @click="changeReadInfoClick">readOnly子组件自行修改按钮</button><!--不能修改父组件的数据,因为父组件的数据是只读的-->
  </div>
</template>

<script>
  export default {
    props: {
      // reactive数据
      info: {
        type: Object,
        default: () => ({})
      },
      // readOnly数据
      readInfo: {
        type: Object,
        default: () => ({})
      }
    },
    emits: ['changeInfo', 'changeReadInfo'],
    setup(props, context){
      function showInfoClick(){
        // this.$emit('changeInfo', '子组件事件') // setup里面没有this,所以需要用context.emit
        context.emit('changeInfo', '子组件事件')
      }
      function changeReadInfoClick(){
        context.emit('changeReadInfo', '子组件事件readOnly')
      }
      return {
        showInfoClick,
        changeReadInfoClick
      }
    }
  }
</script>

<style scoped>
</style>